<template>
  <div class="navBottom">
    <router-link to="/home">
      <dt><span class="iconfont icon-shouye"></span></dt>
      <dd>首页</dd>
    </router-link>

    <router-link to="/dongTai">
      <dt><span class="iconfont icon-iconfontdongtaidianji"></span></dt>
      <dd>动态</dd>
    </router-link>

    <button class="btn" @click="toPractice()">+</button>

    <router-link to="/news">
      <dt><span class="iconfont icon-xiaoxifill"></span></dt>
      <dd>消息</dd>
    </router-link>

    <router-link to="/wode">
      <dt><span class="iconfont icon-wodelianjie"></span></dt>
      <dd>我的</dd>
    </router-link>
  </div>
</template>

<script>
export default {
  methods: {
    toPractice(){
      this.$router.push('/practice');
    }
  },
}
</script>

<style scoped>
  .navBottom{
    width: 100%;
    height: .54rem;
    background-color: rgb(248,248,248);
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  a{
    padding: 0 .1rem;
    text-align: center;
    color: rgb(128,133,139);
    font-size: .12rem;
  }
  .navBottom a dt span{
    font-size: .25rem;
  }
  .router-link-active{
    color: rgb(25,162,254);
  }
  .btn{
    width: .37rem;
    height: .31rem;
    background-color: rgb(25,163,254);
    color: white;
    font-size: .24rem;
    border: none;
    border-radius: 40%;
  }
</style>